<template>
  <div class="access-control-card tech-card">
    <div class="card-header">
      <div class="card-icon">
        <el-icon><Lock /></el-icon>
      </div>
      <h4 class="card-title">{{ device.name }}</h4>
      <el-tag :type="statusType" effect="dark" size="small">{{ statusText }}</el-tag>
    </div>
    <div class="card-body">
      <p class="device-id">设备ID: {{ device.id }}</p>
    </div>
    <div class="card-footer">
      <el-button 
        class="tech-btn" 
        :loading="loading.open"
        :disabled="loading.close"
        @click="handleControl('open')">
        <el-icon><Unlock /></el-icon>
        远程开门
      </el-button>
      <el-button 
        class="tech-btn outline"
        :loading="loading.close"
        :disabled="loading.open"
        @click="handleControl('close')">
        <el-icon><Lock /></el-icon>
        远程关门
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { Lock, Unlock } from '@element-plus/icons-vue';
import { controlAccessPoint } from '@/api/device'; // 导入API函数

export default {
  name: 'AccessControlCard',
  components: { Lock, Unlock },
  props: {
    device: {
      type: Object,
      required: true,
    },
  },
  setup(props, { emit }) { // 引入 emit
    const loading = reactive({
      open: false,
      close: false,
    });
    // 不再需要 internalStatus，因为状态由父组件管理

    const statusMap = {
      online_open: { text: '在线 - 已开启', type: 'success' },
      online_closed: { text: '在线 - 已关闭', type: 'primary' },
      offline: { text: '离线', type: 'info' },
    };

    const statusText = computed(() => statusMap[props.device.status]?.text || '未知');
    const statusType = computed(() => statusMap[props.device.status]?.type || 'info');

    const handleControl = async (action) => {
      loading[action] = true;
      try {
        // 调用真实的API函数
        await controlAccessPoint(props.device.id, action);
        
        ElMessage.success(`操作成功：${action === 'open' ? '门已开启' : '门已关闭'}`);
        
        // 通知父组件刷新列表
        emit('updated');

      } catch (error) {
        ElMessage.error('操作失败，请重试');
        console.error(error);
      } finally {
        loading[action] = false;
      }
    };
    
    return {
      loading,
      statusText,
      statusType,
      handleControl,
    };
  },
};
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';

.access-control-card {
  @include tech-card;

  .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;

    .card-icon {
      font-size: 20px;
      color: var(--accent-blue);
    }
    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      flex-grow: 1;
    }
  }

  .card-body {
    margin-bottom: 20px;
    .device-id {
      font-size: 12px;
      color: var(--text-muted);
    }
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    .tech-btn {
      @include tech-button;
      flex-grow: 1;
    }
  }
}
</style> 